Skórki - Praktyka

W tym przypadku, ponieważ skóra jest ćwiczebna, będzie miała następujące właściwości:

  1. Grafika będzie niezwykle prosta, żeby zajmowała mało miejsca i szybko się wczytywała;
  2. Przycisków będzie minimalna ilość: jeden z blokadą, jeden bez blokady, i dwa serwisowe: "O programie" (do aktualizacji lub przełączenia skórki) z "Zamknij" (dla łatwego wyjścia z odtwarzacza).

Pomysł

Tworzenie skórki rozpoczyna się od Pomysłu. Najlepiej jest najpierw narysować szkic skórki w edytorze graficznym, a później wykonać pliki niezbędne dla skórki.

Co może być pomysłem na prostą skórkę bez żadnych "wodotrysków"? Oczywiście, opublikowane jakiś czas temu systemy operacyjne "z uniwersalnym interfejsem"!

Podczas wykorzystania tego szkicu należy odpowiedzieć na takie pytania:

  1. Jakie kolory będą wykorzystywane?
  2. Co i jak to będzie wyglądać?
  3. ... i gdzie będzie się znajdować (proszę zwrócić uwagę, że zegar nie jest narysowany; a to dlatego, że wygląda on jak pozycja/czas trwania i nie ma sensu tracić na niego czasu).

Łatwo można zobaczyć, że szkic wygląda na "niedopracowany". I tak jest. Jednak odpowiada on na podstawowe pytania i nic więcej nie należy od niego wymagać. W związku z tym, na tym etapie "szkic" jest zakończony: szczegóły będą dopracowywane później.

Informacje o skórce (SkinInfo.txt)

Informacje o skórce nie mają żadnych wymagań, oprócz maksymalnej długości - 45 znaków. Musisz tylko wpisać nazwę skórki, autora i (w razie potrzeby) całą resztę. W tym przypadku wygląda to tak:

SkinTitle=Sample SkinAuthor=Gilorn SkinVer=4.7.4 SkinWWW=http://www.light-alloy.ru/ SkinCmt=sample skin for education kinAudio=0

Unikaj odstępu po znaku "równości".

Wizytówka (preview.png)

Trzy najważniejsze szczegóły, które składają się na wizytówkę:

  1. stylizacja pod skórkę;
  2. obecność logo Light Alloy;
  3. obecność nazwy (tak, na wizytówce również).

Ponieważ nasza skórka stylizowana jest na interfejs kafelkowy, to wizytówka również będzie taka:

Rysunki dla skórki

Począwszy od tego momentu będziesz musiał polegać w dużym stopniu na szkicu i wyobraźni. Przecież tworzenie rysunków dla skórki nie może być określane przez: odtwarzacz nie rozumie tylko rysunków.

Pierwsze pytanie, na które należy odpowiedzieć, to: ile należy utworzyć oddzielnych rysunków? Im więcej rysunków - tym bardziej modułowa konstrukcja i łatwiej będzie pracować nad skórą w przyszłości lub używać jej do tworzenia innych skórek. Jednocześnie, im więcej oddzielnych rysunków, tym więcej będzie na nich pustego miejsca i "cięższa" będzie skórka.

Po starannym rozważeniu rozmieszczenia zdecydowaliśmy się na utworzenie pojedynczych rysunków dla następujących elementów:

Logotyp

Z nim jest najprościej: w pliku będzie tylko jeden obrazek. Wszystko czego potrzebujemy - to przeniesienie logotypu ze szkicu. Można przy okazji jeszcze coś do niego dodać.

Menu kontekstowe

Jest ono złożone ponieważ zawiera kilka elementów. Ponieważ wielkość elementów jest standardowa, to można przemyśleć, jak wygodnie jej rozmieścić.

Albo wziąć z podstawowego obrazka ze skórki o podobnej konstrukcji:

Ponadto 10 znaków menu kontekstowego wyświetlanych jest jako jeden obiekt, więc nie należy zmieniać ich kolejności lub liczby rzędów.

Proszę zwrócić uwagę na tło: jest czerwono-różowe. Jego zadaniem jest - dawanie jednoznacznej i jasnej odpowiedzi na pytanie "to tło?", a także łatwe pokazywanie granicy oddzielnych rysunków w pliku. Zamiast czerwono-różowego koloru można wybrać inny - jest to kwestia osobistych preferencji.

Nawiasem mówiąc, takie modułowe podejście pozwala kopiować część pliku rozmieszczenia (interface.xml) ze starej skórki do в nowej.

Zestawy kolorów

Tutaj jest wszystko proste (skala 500 %)...

...jak 67 cegiełek. Niestety wiele niestandardowych kolorów nie sprzyja prostemu zrozumieniu przypisania każdego piksela. A jeśli w przyszłości będzie wymagana korekta, to stracimy dużo czasu na określenie, jaki piksel należy zmienić. Dlatego taki wariant ma sens tylko w jednym przypadku: podczas używania specjalnego edytora skórek.

Najrozsądniejszym rozwiązaniem jest stosowanie dla każdego koloru koloru nie pojedynczego piksela, a piksela z ilustracją. Oczywiście, utworzenie takiego systemu zajmie nie jedną godzinę, ale w efekcie otrzymamy o wiele bardziej wygodny i intuicyjny mechanizm wyboru kolorów. Na przykład, jak ten poniżej (skala 200 %):

Tutaj każdy kolor reprezentowany jest warstwą-wypełnieniem "kolor" z graficzną maską (narzędzia Photoshop). Wszystkie kolory są wygodnie pogrupowane w foldery. W wyniku tego, na etapie wstępnego wyboru kolorów widać, jak on będzie wyglądał. Oprócz tego, każda warstwa ma swoją nazwę, więc można pożądaną warstwę szybko odszukać. Aby tutaj zmienić kolor wystarczy dwukrotnie kliknąć na odpowiedniej warstwie.

Część główna

W głównym pliku rysunku znajdzie się wszystko to, co nie pojawiło się w trzech poprzednich, a mianowicie:

Ponieważ dalszego rozwoju skórki nie będzie, wszystko można ładnie wykonać:

Na pierwszy rzut oka wszystko jest kompaktowe, ale nawet w tej skórce jest dużo wolnego miejsca. Po prostu jest ono szare, a nie czerwone.

Przyjrzyj się dokładnie szarej strefie na samym dole. Cyfry i elementy głośności oraz osi czasu znajdują się w takim porządku, w jakim będą one położone na skórce. Ponadto, stałe graficzne każdego elementu położone w odniesieniu do drugich, przynależą do tej kontrolki w porządku wizualnym. To wszystko umożliwi w przyszłości zrozumieć co oznacza każdy z tych elementów. A rozmieszczenie pomoże w następnym etapie określić granice każdej stałej graficznej.

Oprócz tego można zmienić rysunek przedstawiający jeszcze niewypełnioną głośność (szary kwadrat u dołu po lewej), niedorysowany z prawej na 1 piksel. Jest to potrzebne do wizualnego ukrycia "niedojeżdżania" suwaka na ten sam 1 piksel. Jak wiadomo, suwak jeździ z wyliczeniem, że jest w nim 10 pikseli (a nie 9, jak w tej skórce).

Przyjrzyjmy się graficznym czcionkom. Zaczynają się one od znaku "<". Symbol ten rysujemy przed pozycją, jeśli użytkownik włącza odwrotne odliczanie czasu. Jeśli użyjemy tego znaku jako minus, to otrzymamy dużo bardziej zrozumiałe wyrażenie (jak np. w skórkach Alter Ego, Dub, PK-69 oraz większości innych).

Następne na co trzeba zwrócić uwagę, to animacja przycisków z funkcjami. Reakcja odtwarzacza zachodzi nie na wciśnięcie przycisku, a na jego późniejsze uwolnienie. Prowadzi to do następujących efektów:

Dlatego konieczne jest używanie zmiany obrazu przycisku nie z dolnego lewego rysunku, ale z prawego górnego. Jest to ostatnio dodane zalecenie, dlatego jest pewna ilość skórek, które go nie wypełniają (po prostu ukazały się one przed wydaniem zalecenia).

Plik układu graficznego (interface.xml)

Jest to najważniejsza część pracy podczas tworzenia skórek, którą dobrze by było sprawdzić na żywo (tj. wypróbowanie niedokończonej skórki w odtwarzaczu). Na początku, należy utworzyć pusty plik i umieścić fragmenty kodu w dogodny sposób (nie zapomnij o kodowaniu UTF-8 with signature):

<?xml version="1.0"?> <SKIN> <!-- Logotyp --> <IMAGE id="Logo" file="logo.bmp"> <AREA id="Splash" pos="0,0" size="170,170"/> <!-- Logotyp --> </IMAGE> <!-- Nagłówek okna --> <IMAGE id="HD" file="main.bmp"> </IMAGE> <!-- Panel sterowania --> <IMAGE id="FT" file="main.bmp"> </IMAGE> <!-- Lista odtwarzania --> <IMAGE id="PL" file="main.bmp"> </IMAGE> <!-- Zestawy kolorów --> <IMAGE id="Color" file="Color.bmp"> </IMAGE> <!-- Menu kontekstowe --> <IMAGE id="Menu" file="Rclick.bmp"> </IMAGE> <!-- Ikony myszki w podpowiedziach --> <IMAGE id="Hint" file="main.bmp"> </IMAGE> <!-- Rozpoznawanie numerów wg różnych kolorów u dołu bloku --> <FONT id="Digits" img="FT.Digits" chars="&lt;0123456789: &gt;"/> <!-- "<0123456789: >" --> <!-- //Koniec oznaczania głównych rysunków na fragmenty // =================== --> <!-- Początek opisu zastosowania utworzonych wcześniej fragmentów rysunku ======== --> <CTLDEF id="WndBorder" type="Panel" bg="HD.brd" size="29,150" bgsplit="10,24" border_size="4,3,4,5"/> <!-- Opisanie obramowania programu --> <!-- Dysponowanie przycisków nagłówka okna --> <CTLDEF id="Caption" type="Panel" bg="HD.bg" size="200,21" bgsplit="14,10"> <!-- Tło nagłówka --> </CTLDEF> <!-- Dysponowanie przycisków Panelu sterowania --> <CTLDEF id="CtlPanel" type="Panel" bg="FT.bg" size="444,40" bgsplit="10,10"> <!-- Tło panelu sterowania --> </CTLDEF> <!-- Dysponowanie przycisków Listy odtwarzania --> <CTLDEF id="PListPanel" type="Panel" bg="PL.bg" size="29,20" bgsplit="7,23"> <!-- Tło przycisków --> </CTLDEF> </SKIN>

Zielony tekst - to komentarze. Pomagają one orientować się w tekście, ale są ignorowane przez program.

Powiadomienie o stałych graficznych

Każda stała posiada unikalną nazwę, położenie i rozmiar. Nazwę można wziąć z katalogu, ale położenie i rozmiar należy określić samodzielnie. Odbywa się to za pomocą edytora graficznego.

Większość edytorów graficznych wyświetla współrzędne kursora i posiada narzędzie "zaznaczanie obszaru prostokątnego" ze wskazaniem wielkości wybranego obszaru.

Do tego celu idealnie nadaje się PhotoFiltre (bezpłatny do użytku niekomercyjnego, strona oficjalna, wersja portable). Pozwala on, bezpośrednio po zaznaczeniu obszaru, poznać jego położenie i rozmiar. Przy czym rozmiar wydzielonego obszaru można na bieżąco skorygować myszką:

Zatem określenie wszystkich wartości występuje w czterech fazach:

  1. W pliku znaczników dodajemy nową linię w postaci "<AREA id="" pos="" size=""/>".
  2. Z katalogu podstawiamy id.
  3. W edytorze graficznym określamy wartości pozycji i rozmiaru.
  4. wartości te podstawiamy w pos="" size="".

W efekcie 15 minut wysiłku pierwsza część pliku znaczników przyjmuje następującą postać:

<!-- Logotyp --> <IMAGE id="Logo" file="logo.bmp"> <AREA id="Splash" pos="0,0" size="170,170"/> <!-- Logotyp --> </IMAGE> <!-- Nagłówek okna --> <IMAGE id="HD" file="main.bmp"> <AREA id="brd" pos="0,0" size="26,62"/> <!-- Obramowanie okna --> <AREA id="bg" pos="4,3" size="18,20"/> <!-- Tło nagłówka--> <AREA id="TitleBG" pos="5,6" size="10,16"/> <!-- Tło pod tekstem--> <AREA id="btAbout" pos="0,63" size="26,59"/> <!-- [o programie] --> <AREA id="btExit" pos="27,63" size="45,59"/> <!-- [zamknij] --> </IMAGE> <!-- Panel sterowania --> <IMAGE id="FT" file="main.bmp"> <AREA id="bg" pos="27,0" size="45,40"/> <!-- Tło podstawowego panelu sterowania --> <AREA id="btPlay" pos="73,0" size="81,122"/> <!-- [Odtwarzaj/Wstrzymaj] --> <AREA id="btPrefs" pos="155,0" size="40,122"/> <!-- [Ustawienia] --> <AREA id="Digits" pos="2,125" size="120,8"/> <!-- Zestaw liczb "<0123456789: >" --> <AREA id="SeekBGfill" pos="34,135" size="24,23"/> <!-- Oś czasu już zapełniona --> <AREA id="SeekThumb" pos="59,147" size="24,11"/> <!-- Suwak na osi, wyrównanie do dołu --> <AREA id="SeekBG" pos="84,135" size="24,23"/> <!-- Oś czasu jeszcze pusta --> <AREA id="SeekHiTick" pos="59,140" size="1,6"/> <!-- główne wykończenia na skali--> <AREA id="SeekLoTick" pos="60,140" size="1,6"/> <!-- pośrednie wykończenia na skali--> <AREA id="VolBGF" pos="2,149" size="9,9"/> <!-- Regulator dźwięku już zapełniony --> <AREA id="VolThumb" pos="12,149" size="9,9"/> <!-- Suwak regulator dźwięku--> <AREA id="VolBG" pos="22,149" size="9,9"/> <!-- Regulator dźwięku jeszcze pusty --> </IMAGE> <!-- Lista odtwarzania --> <IMAGE id="PL" file="main.bmp"> <AREA id="bg" pos="27,41" size="45,21"/> <!-- tło przycisków --> </IMAGE> <!-- Zestawy kolorów --> <IMAGE id="Color" file="Color.bmp"> <AREA id="LACaption" pos="1,1" size="1,2"/> <!--określenie koloru tekstu w nagłówku --> <AREA id="OSD" pos="141,18" size="1,5"/> <!--określenie koloru OSD --> <AREA id="Timeline" pos="71,83" size="1,2"/> <!--określenie koloru automatycznego przewijania --> <AREA id="Hint" pos="71,119" size="1,3"/> <!--określenie koloru podpowiedzi --> <AREA id="PL" pos="1,18" size="1,12"/> <!--określenie koloru listy odtwarzania --> <AREA id="Menu" pos="71,18" size="1,7"/> <!--określenie koloru menu kontekstowego --> <AREA id="FOD_TV" pos="1,83" size="1,18"/> <!--określenie koloru pełnoekranowego wczytywania plików --> <AREA id="SOD_TV" pos="1,83" size="1,18"/> <!--określenie koloru pełnoekranowego wczytywania napisów --> </IMAGE> <!-- Menu kontekstowe --> <IMAGE id="Menu" file="Rclick.bmp"> <AREA id="bg" pos="0,0" size="20,23"/> <!-- rysunek dla kolumny ikon w menu kontekstowym --> <AREA id="pics" pos="0,24" size="33,84"/> <!-- ikony dla elementów menu kontekstowego --> <AREA id="Checked" pos="0,109" size="16,16"/> <!-- znacznik zaznaczonego punktu w menu --> <AREA id="Bookmark" pos="22,0" size="11,11"/> <!-- zakładka w liście odtwarzania --> </IMAGE> <!-- Ikony myszki w podpowiedziach --> <IMAGE id="Hint" file="main.bmp"> <AREA id="Lclick" pos="150,138" size="22,22"/> <!-- Rysunek LPM --> <AREA id="Rclick" pos="173,138" size="22,22"/> <!-- Rysunek PPM --> </IMAGE>

Tworzenie czcionki graficznej

Ogólnie rzecz biorąc, istnieje tutaj tylko jedna pułapka: nie wszyscy wiedzą, co to takiego "&lt;" i "&gt;" i czym one się różnią. Dlatego lepiej jest podać w komentarzu jego przeznaczenie w bardziej zrozumiałym języku:

<!-- Rozpoznanie cyfr naprzemiennie w różnych kolorach w dolnej części bloku --> <FONT id="Digits" img="FT.Digits" chars="&lt;0123456789: &gt;"/> <!-- "<0123456789: >" -->

Stosowanie stałych i czcionek w kontrolkach

Jest to finalny etap tworzenia skórki i pożądana jest jego wizualna kontrola.

Istnieje kilka informacji dodatkowych, które należy wykonać:

  1. pozycja "-90,6" oznacza odległość między prawą krawędzią paneli i lewym górnym pikselem kontrolki, a nie szerokość pustego miejsca między krawędzią i kontrolką.
  2. Jeśli używamy dodatkowego panelu pływającego, to współrzędne jego zagnieżdżonych kontrolek nie są zliczane jak pozostałe (od lewego górnego narożnika panelu podstawowego), a od lewego górnego narożnika tego pływającego panelu.
  3. Zapis widoku pos="140,18" size="-50,24" informuje, że szerokość kontrolki jest od kropki 140 do kropki, przesuniętej w lewo odnośnie prawej krawędzi panelu na 50 pikseli. Tzn. zdeterminowany jest pozycją prawej krawędzi kontrolki.

Informacje dodatkowe mogą wyglądać na złożone, jeśli jednak zobaczymy to na żywej skórce, stanie się to zrozumiałe.

Od czego zależy pozycja i rozmiar kontrolek? Rozmiar - tylko od tego, jaki obrazek został narysowany (z wyjątkiem paneli i suwaków głośności i osi czasu - one są rozciągane). Pozycja nie zależy od niczego innego, oprócz zamysłu autora skórki.

<CTLDEF id="WndBorder" type="Panel" bg="HD.brd" size="29,150" bgsplit="10,24" border_size="4,3,4,5"/> <!-- Opisanie obramowania programu --> <!-- Rozmieszczenie przycisków nagłówka okna --> <CTLDEF id="Caption" type="Panel" bg="HD.bg" size="200,21" bgsplit="14,10"> <!-- Tło nagłówka --> <CONTROL type="GfxBtn" pos="0,0" size="26,19" img="HD.btAbout" link="App.About"/> <!-- [o programie] --> <CONTROL type="GfxBtn" pos="-45,0" size="45,19" img="HD.btExit" link="App.Exit"/> <!-- [zamknij] --> <CONTROL type="Text" pos="30,3" size="-50,17" font="Verdana" fontsz="9" top_delta="-1" bold="0" bg="HD.TitleBG" bgsplit="8,5" text="{TITLE}"/> <!-- Linia tekstowa nagłówka --> </CTLDEF> <!-- Rozmieszczenie przycisków Panelu sterowania --> <CTLDEF id="CtlPanel" type="Panel" bg="FT.bg" size="444,40" bgsplit="10,10"> <!-- Tło Panelu sterowania --> <CONTROL type="GfxBtn" pos="0,0" size="40,40" img="FT.btPlay" link="App.SuperPlay"/> <!-- [Odtwarzaj/Wstrzymaj] --> <CONTROL type="GfxBtn" pos="-40,0" size="40,40" img="FT.btPrefs" link="App.Prefs"/> <!-- [Ustawienia] --> <CONTROL type="Text" pos="50,6" size="140,7" font="Digits" text=" {POS} &gt; {DUR}"/> <!-- Pozycja/Czas trwania --> <CONTROL type="Text" pos="-90,6" size="45,7" font="Digits" text="{TIME}"/> <!-- Aktualny czas --> <CONTROL type="Slider" pos="50,31" size="78,9" bg="FT.VolBG" bgsplit="1,19" bgfill="FT.VolBGF" thumb="FT.VolThumb" link="Audio.Volume"/> <!-- Regulator głośności --> <CONTROL type="Seeker" pos="140,18" size="-50,24" bg="FT.SeekBG" bgsplit="12,6" bgfill="FT.SeekBGfill" thumb="FT.SeekThumb" lotick="FT.SeekLoTick" hitick="FT.SeekHiTick" link="Player.Seeker" OpeningPos="14" OpeningHeight="8"/> <!-- Oś czasu --> </CTLDEF> <!-- Rozmieszczenie przycisków Listy odtwarzania --> <CTLDEF id="PListPanel" type="Panel" bg="PL.bg" size="29,20" bgsplit="7,23"> <!-- tło przycisków --> </CTLDEF>

Kiedy wszystkie elementy mają już swoje położenie i rozmiar, należy przeglądnąć skórkę pod względem ewentualnie występujących problemów; nieestetycznych luk i niedoróbek. W przypadku ich wystąpienia, należy poprawić pozycję kontrolek.


W końcu plik rozmieszczenia przybiera swój ostateczny wygląd:

<?xml version="1.0"?> <SKIN> <!-- Logotyp --> <IMAGE id="Logo" file="logo.bmp"> <AREA id="Splash" pos="0,0" size="170,170"/> <!-- Logotyp --> </IMAGE> <!-- Nagłówek okna --> <IMAGE id="HD" file="main.bmp"> <AREA id="brd" pos="0,0" size="26,62"/> <!-- Obramowanie okna --> <AREA id="bg" pos="4,3" size="18,20"/> <!-- Tło nagłówka--> <AREA id="TitleBG" pos="5,6" size="10,16"/> <!-- Tło pod tekstem--> <AREA id="btAbout" pos="0,63" size="26,59"/> <!-- [o programie] --> <AREA id="btExit" pos="27,63" size="45,59"/> <!-- [zamknij] --> </IMAGE> <!-- Panel sterowania --> <IMAGE id="FT" file="main.bmp"> <AREA id="bg" pos="27,0" size="45,40"/> <!-- Tło podstawowego Panelu sterowania --> <AREA id="btPlay" pos="73,0" size="81,122"/> <!-- [Odtwarzaj/Wstrzymaj] --> <AREA id="btPrefs" pos="155,0" size="40,122"/> <!-- [Ustawienia] --> <AREA id="Digits" pos="2,125" size="120,8"/> <!-- Zestaw cyfr "<0123456789: >" --> <AREA id="SeekBGfill" pos="34,135" size="24,23"/> <!-- Oś czasu już zapełniona --> <AREA id="SeekThumb" pos="59,147" size="24,11"/> <!-- Suwak na osi, wyrównany do dołu --> <AREA id="SeekBG" pos="84,135" size="24,23"/> <!-- Oś czasu jeszcze pusta --> <AREA id="SeekHiTick" pos="59,140" size="1,6"/> <!-- główne oznaczenia na osi --> <AREA id="SeekLoTick" pos="60,140" size="1,6"/> <!-- pośrednie oznaczenia na osi --> <AREA id="VolBGF" pos="2,149" size="9,9"/> <!-- Regulator dźwięku już zapełniony --> <AREA id="VolThumb" pos="12,149" size="9,9"/> <!-- Suwak regulatora dźwięku --> <AREA id="VolBG" pos="22,149" size="9,9"/> <!-- Regulator dźwięku jeszcze pusty --> </IMAGE> <!-- Lista odtwarzania --> <IMAGE id="PL" file="main.bmp"> <AREA id="bg" pos="27,41" size="45,21"/> <!-- tło przycisków --> </IMAGE> <!-- Zestawy kolorów --> <IMAGE id="Color" file="Color.bmp"> <AREA id="LACaption" pos="1,1" size="1,2"/> <!-- określenie koloru tekstu w nagłówku --> <AREA id="OSD" pos="141,18" size="1,5"/> <!-- określenie koloru OSD --> <AREA id="Timeline" pos="71,83" size="1,2"/> <!-- określenie koloru automatycznego przewijania --> <AREA id="Hint" pos="71,119" size="1,3"/> <!-- określenie koloru podpowiedzi --> <AREA id="PL" pos="1,18" size="1,12"/> <!-- określenie koloru listy odtwarzania --> <AREA id="Menu" pos="71,18" size="1,7"/> <!-- określenie koloru menu kontekstowego --> <AREA id="FOD_TV" pos="1,83" size="1,18"/> <!-- określenie koloru pełnoekranowego wczytywania plików --> <AREA id="SOD_TV" pos="1,83" size="1,18"/> <!-- określenie koloru pełnoekranowego wczytywania napisów --> </IMAGE> <!-- Menu kontekstowe --> <IMAGE id="Menu" file="Rclick.bmp"> <AREA id="bg" pos="0,0" size="20,23"/> <!-- rysunek kolumny ikon w menu kontekstowym --> <AREA id="pics" pos="0,24" size="33,84"/> <!-- ikony dla elementów menu kontekstowego --> <AREA id="Checked" pos="0,109" size="16,16"/> <!-- znacznik zaznaczonego punktu menu --> <AREA id="Bookmark" pos="22,0" size="11,11"/> <!-- zakładka w liście odtwarzania --> </IMAGE> <!-- Ikony myszki w podpowiedziach --> <IMAGE id="Hint" file="main.bmp"> <AREA id="Lclick" pos="150,138" size="22,22"/> <!-- Rysunek LPM --> <AREA id="Rclick" pos="173,138" size="22,22"/> <!-- Rysunek PPM --> </IMAGE> <!-- Rozpoznawanie cyfr naprzemiennie różnych kolorów u dołu bloku --> <FONT id="Digits" img="FT.Digits" chars="&lt;0123456789: &gt;"/> <!-- "<0123456789: >" --> <!-- //Koniec rozmieszczania podstawowych rysunków na fragmenty // ==================================== --> <!-- Początek opisywania zastosowania utworzonych wcześniej fragmentów rysunku ========================= --> <CTLDEF id="WndBorder" type="Panel" bg="HD.brd" size="29,150" bgsplit="10,24" border_size="4,3,4,5"/> <!-- Opisanie obramowania programu --> <!-- Rozmieszczamy przyciski nagłówka okna --> <CTLDEF id="Caption" type="Panel" bg="HD.bg" size="200,21" bgsplit="14,10"> <!-- Tło nagłówka --> <CONTROL type="GfxBtn" pos="0,0" size="26,19" img="HD.btAbout" link="App.About"/> <!-- [o programie] --> <CONTROL type="GfxBtn" pos="-45,0" size="45,19" img="HD.btExit" link="App.Exit"/> <!-- [zamknij] --> <CONTROL type="Text" pos="30,3" size="-50,17" font="Verdana" fontsz="9" top_delta="-1" bold="0" bg="HD.TitleBG" bgsplit="8,5" text="{TITLE}"/> <!-- Linia tekstowa nagłówka --> </CTLDEF> <!-- Rozmieszczamy przyciski Panelu sterowania --> <CTLDEF id="CtlPanel" type="Panel" bg="FT.bg" size="444,40" bgsplit="10,10"> <!-- Tło Panelu sterowania --> <CONTROL type="GfxBtn" pos="0,0" size="40,40" img="FT.btPlay" link="App.SuperPlay"/> <!-- [Odtwarzaj/Wstrzymaj] --> <CONTROL type="GfxBtn" pos="-40,0" size="40,40" img="FT.btPrefs" link="App.Prefs"/> <!-- [Ustawienia] --> <CONTROL type="Text" pos="50,6" size="140,7" font="Digits" text=" {POS} &gt; {DUR}"/> <!-- Pozycja/Czas trwania --> <CONTROL type="Text" pos="-90,6" size="45,7" font="Digits" text="{TIME}"/> <!-- Aktualny czas --> <CONTROL type="Slider" pos="50,31" size="78,9" bg="FT.VolBG" bgsplit="1,19" bgfill="FT.VolBGF" thumb="FT.VolThumb" link="Audio.Volume"/> <!-- Regulator głośności --> <CONTROL type="Seeker" pos="140,18" size="-50,24" bg="FT.SeekBG" bgsplit="12,6" bgfill="FT.SeekBGfill" thumb="FT.SeekThumb" lotick="FT.SeekLoTick" hitick="FT.SeekHiTick" link="Player.Seeker" OpeningPos="14" OpeningHeight="8"/> <!-- Oś czasu --> </CTLDEF> <!-- Rozmieszczamy przyciski Listy odtwarzania --> <CTLDEF id="PListPanel" type="Panel" bg="PL.bg" size="29,20" bgsplit="7,23"> <!-- tło przycisków --> </CTLDEF> </SKIN>

Montowanie skórki

W tej chwili możliwe jest już używanie skórki, ale nadal niewygodne jej udostępnianie. Teraz należy ją zoptymalizować i spakować.

Optymalizacja skórki

Optymalizacja zamyka się w zmianie plików graficznych.

Jak wiadomo, format "bmp" zajmuje bardzo dużo miejsca ponieważ nie ma wbudowanych funkcji kompresji. Ale nie jest tak źle. Zamiast tego można pobawić się z głębią kolorów. Obrazek w formacie "bmp" obsługuje takie warianty głębi kolorów:

Aktualna ilość kolorów w obrazkach naszej skórki:

Jak widać, 2 obrazki można skompresować do 8-bitowej głębi kolorów, a jeden - nawet do 4-bitowej. Aby w nowym obrazku zachować niezbędne kolory, należy je przeindeksować. Jak to zostanie zrobione, zależy od edytora graficznego. Na przykład, w Photoshopie należy przejść do menu głównego \ Obraz \ Tryb \ Indeksowanie kolorów.... Po zmianie okazało się, że dla Rclick.bmp kompresja do 256-ciu kolorów jest wizualnie niezauważalna. Dlatego przeprowadzimy zmianę głębi kolorów dla wszystkich obrazków:

Plik Stary rozmiar, KB Nowa głębia kolorów Nowy rozmiar, KB
logo.bmp 85,1 8 bitów 29,4
Color.bmp 71,1 8 bitów 23,8
Rclick.bmp 12,3 8 bitów 4,0
main.bmp 91,9 4 bity 15,7
RAZEM 260,4 - 72,9

Jak się okazało, całkowita objętość danych została pomniejszona więcej niż trzy razy. Imponujące! Analogicznie należy postąpić z plikiem "preview.png". Jedyna różnica jest taka, że format "png" nie ma 4-bitowej głębi kolorów, a tylko pełną (16,8 mln. kolorów) lub 8-bitową (256 kolorów).

Pakowanie skórki

To całkiem proste: bierzemy wszystkie niezbędne pliki i archiwizujemy do formatu "zip". Poziom kompresji - dowolny, ale zalecany jest maksymalny. Najlepiej zostawić domyślne ustawienia kompresji, ponieważ Light Alloy nie rozumie nowoczesnych metod kompresji, tj. LZMA.

Wreszcie ostateczny szlif: w skórce należy zmienić rozszerzenie - z ".zip" na ".las".

Rezultat

W końcu, po jednym lub dwóch dniach pracy, skórka jest gotowa!

Zapisz skórkę...

Zapisz oryginalne pliki do skórki...